<template>
    <div class="app-main-plus beautify">
      <div class="search-container">
        <el-row :gutter="10">
          <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
            <el-button class="back-btn" type="default" size="small" plain icon="el-icon-arrow-left" @click="goBack">返回</el-button>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="pull-right" v-if="canEditAdd()">
              <el-button v-show="!isDisabled" size="small" @click="submit" type="primary" :disabled="loading" >提交</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content-container">
        <form-title title="基本信息" ref="baseInfo">
          <zb-form
            v-bind="formOptions"
            :model="form"
            v-loading="loading"
            :editable="canEditAdd()"
            ref="form1"
            @handleChange="handleChange">
          </zb-form>
        </form-title>
        <form-title title="立项信息" ref="baseInfo0" :hideCollapse="false" :default-open="false">
          <zb-form
            v-bind="formOptions0"
            :model="form.pigfarmProject"
            v-loading="loading"
            :editable="false"
            ref="form0">
          </zb-form>
          <el-table :data="form.pigfarmProject.pigfarmProjectDemandList" border size="mini" v-loading="loading">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="areaDictId" label="场区" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="item in areaList" v-if="item.id==scope.row.areaDictId">{{item.value}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="nodeName" label="单体" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remark" label="改造需求" show-overflow-tooltip></el-table-column>
            <el-table-column prop="fileList1" label="改造前照片">
              <template slot-scope="scope">
                <zb-form-upload v-bind="fileInfos" :disabled="true" v-model="scope.row.fileList1" :style="`width: 100%;`"></zb-form-upload>
              </template>
            </el-table-column>
          </el-table>
        </form-title>
        <form-title title="图纸信息" ref="baseInfo2" :hideCollapse="false" :default-open="false">
          <zb-form
            v-bind="formOptions2"
            :model="form.designInfoVo"
            v-loading="loading"
            :editable="false"
            ref="form2">
          </zb-form>
        </form-title>
        <form-title title="关联图纸设计流程">
          <el-table
            v-loading="loading" border ref="tableForm2" :data="form.bpmInfos">
            <el-table-column type="index" label="序号" width="120"  align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.flag" :true-label="1" size="small" :disabled="!canEditAdd()"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="bpmTitle" label="名称" align="center"></el-table-column>
            <el-table-column prop="createBy" label="流程发起人" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="流程发起时间" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="completeTime" label="流程结束时间" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="操作" label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="getBpm(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </form-title>
        <form-title title="设计图纸">
          <zb-form
            v-bind="formOptions1"
            :model="form"
            v-loading="loading"
            :editable="canEditAdd()"
            ref="form2"
            @uploadSuccess="uploadSuccess"
            @handleChange="handleChange">
          </zb-form>
        </form-title>
      </div>
    </div>
</template>

<script>
  import { getBudgetingDetail,addBudgetingDetail, updateBudgetingDetail} from "@/api/budgetManager/budgeting";
  import FormTitle from "@/views/components/FormTitle";
  import Index from "./index.vue";
  import BaseBpm from "@/views/base/BaseBpm";
  import BasePagination from "@/views/base/BasePagination";
  import BaseIndex from "@/views/base/BaseIndex";
  import {getPortUrl} from "@/utils/http";
  import Cookies from "js-cookie";
  import {getToken} from "@/utils/auth";
  import {newWindowBpm} from "@/utils/openBpm";
  import {getProjectBudget} from "@/api/resourceMatching/contractorMatching";
  import request from "@/utils/request";
    export default {
      name: "BudgetingDetail",
      components: { BaseBpm, BasePagination ,FormTitle,},
      extends:BaseIndex,
      watch:{
      },
      data() {
          return {
            sonListHeight: 0,
            formOptions0:{
              labelWidth: "160px",
              rules: {
              },
              options: [
                {
                  label: "计划开始",
                  prop: "beginTime",
                  type: 'value',
                  span: 8,
                  height:62,
                },
                {
                  label: "计划结束",
                  prop: "endTime",
                  type: 'value',
                  span: 8,
                  height:62,
                },
                {
                  label: "建设周期(天)",
                  prop: "buildDay",
                  type: 'value',
                  span: 8,
                  height:62,
                },
                {
                  label: "立项类型",
                  prop: "projectBuildType",
                  type: 'valueFormatter',
                  span: 8,
                  height:62,
                  formatter:(val)=>{
                    if (val==1)return '猪场技改'
                    if (val==2)return '环保技改'
                    if (val==3)return '未批先建'
                    if (val==4)return '数据补录'
                    return ''
                  }
                },
                {
                  label: "概算金额(元)",
                  prop: "estimatedAmount",
                  type: 'value',
                  span: 8,
                  height:62,
                },
                {
                  label: "最终出资方",
                  prop: "buildParty",
                  type: 'valueFormatter',
                  span: 8,
                  height:62,
                  formatter:(val)=>{
                    if (val == 1) return '正邦出资'
                    if (val == 2) return '代建方出资'
                    if (val == 3) return '出租方出资'
                    return ''
                  }
                },
                {
                  label: "项目描述",
                  prop: "remark",
                  type: 'value',
                  span: 24,
                  height:90,
                },
                {
                  label: "概算文件",
                  prop: "fileList5",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "航拍图",
                  prop: "fileList2",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "五区五流规划图",
                  prop: "fileList3",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "整体立项的会议纪要",
                  prop: "fileList4",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "其他附件",
                  prop: "fileList1",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
              ]
            },
            formOptions2:{
              labelWidth: "160px",
              rules: {
              },
              options: [
                {
                  label: "设计类型",
                  prop: "designType",
                  type: 'value',
                  span: 8,
                },
                {
                  label: "设计专业",
                  prop: "designMajor",
                  type: 'value',
                  span: 8,
                },
                {
                  span: 8,
                },
                {
                  label: "设计图纸",
                  prop: "designFiles",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "设备物料清单",
                  prop: "listFiles",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "其他附件",
                  prop: "otherFiles",
                  type: 'file',
                  span: 24,
                  disabled:true,
                  height:90,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
              ]
            },
            formOptions:{
              labelWidth: "160px",
              rules: {
                projectName: [
                  { required: true, message: "项目名称 不能为空", trigger: "blur" }
                ],
                technicalChangeFiles: [
                  { required: true, message: "设计图纸 不能为空", trigger: "blur" }
                ],
                cost: [
                  { required: true, message: "预算金额 不能为空", trigger: "blur" }
                ],
              },
              options: [
                {
                  label: "项目名称",
                  prop: "projectName",
                  type: "selectData",
                  searchKey: "projectName",
                  span: 8,
                  url: `${process.env.VUE_APP_BASE_API}/pigfarm-project/like`,
                  props: {
                    label: "projectName",
                    value: "projectId"
                  },
                  getDictSuccessStatus:0,
                  getDictResultMap:{
                    status:'data.code',
                    data:'data.data',
                    list:'data.data.records',
                    total:'data.data.total',
                  },
                  dialogType:2,
                  createdRequest: false,
                  searchAbel: false,
                  selectAble: false,
                  searchIconVisible:true,
                  labelFields:['pigfarmName','pigfarmNumber','projectName','projectNumber'],
                  labelFieldsName:['猪场名称','猪场编号','项目名称','项目编号'],
                  searchLabel:['projectName'],
                  searchLabelName:['项目名称'],
                  height:62,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  listeners: {
                    dataChange: val => {
                      if (val){
                        // 都是自动带出的
                        this.$set(this.form,'projectNumber',val.projectNumber)
                        this.$set(this.form,'projectId',val.projectId)
                        this.$set(this.form,'projectName',val.projectName)
                        this.$set(this.form,'pigfarmName',val.pigfarmName)
                        this.$set(this.form,'pigfarmId',val.pigfarmId)
                        this.$set(this.form,'pigfarmNumber',val.pigfarmNumber)
                        this.$set(this.form,'instId',val.instId)
                        getProjectBudget({projectId:val.projectId,type:'design'})
                          .then((res)=>{
                            if (res.code===0){
                              this.form.bpmInfos = res.data
                            }
                            this.loading = false
                          })
                          .catch(()=>{
                            this.loading = false
                          })
                      }
                    }
                  }
                },
                {
                  label: "项目编码",
                  prop: "projectNumber",
                  type: 'text',
                  disabled:true,
                  height:62,
                  span: 8,
                },
                {
                  label: "猪场名称",
                  prop: "pigfarmName",
                  type: 'text',
                  disabled:true,
                  height:62,
                  span: 8,
                },
                {
                  label: "摘要信息",
                  prop: "remark",
                  type: 'textarea',
                  height:100,
                  span: 24,
                },
                {
                  label: "申请人",
                  prop: "createName",
                  type: 'text',
                  disabled:true,
                  height:62,
                  span: 8,
                },
                {
                  label: "申请时间",
                  prop: "createTime",
                  type: 'date',
                  format:'yyyy-MM-dd',
                  valueFormat:'yyyy-MM-dd',
                  disabled:true,
                  height:62,
                  span: 8,
                },
                {
                  label: "预算金额(元)",
                  prop: "cost",
                  type: 'number',
                  height:62,
                  span: 8,
                },
              ]
            },
            formOptions1:{
              options: [
                {
                  label: "资料名称",
                  prop: "资料名称",
                  type: 'title',
                  height:46,
                  span: 5,
                },
                {
                  label: "验收资料",
                  prop: "验收资料",
                  type: 'title',
                  height:46,
                  span: 9,
                },
                {
                  label: "上传人",
                  prop: "上传人",
                  type: 'title',
                  height:46,
                  span: 5,
                },
                {
                  label: "上传时间",
                  prop: "上传时间",
                  type: 'title',
                  height:46,
                  span: 5,
                },

                {
                  span: 5,
                  type: 'html',
                  htmlContent:'<div style="width: 100%;text-align: center;height: 100%;justify-content: center;display: contents;"><span style="color: red">*</span>技改造价文件</div>',
                },
                {
                  hiddenLabel:true,
                  label: "验收资料",
                  prop: "technicalChangeFiles",
                  type: 'file',
                  span: 9,
                  url:`${process.env.VUE_APP_BASE_API}/file/upload`,
                  downUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  previewUrl:`${process.env.VUE_APP_BASE_API}/file/download`,
                  headers:{
                    Authorization:'Bearer '+getToken()
                  },
                  limit:4,
                  resultDataMap:{
                    fileName:'',
                    filePath:'',
                  }
                },
                {
                  label: "上传人",
                  prop: "technicalChangeFiles.0.createBy",
                  checkProp: "technicalChangeFiles",
                  type: 'value',
                  span: 5,
                  align: "center",
                  hiddenLabel:true,
                },
                {
                  label: "上传时间",
                  prop: "technicalChangeFiles.0.createTime",
                  checkProp: "technicalChangeFiles",
                  type: 'value',
                  span: 5,
                  align:'center',
                  hiddenLabel:true,
                },
              ]
            },
            form: {
              remark:'',
              cost:0,
              technicalChangeFiles:[],
              bpmInfos:[],
              pigfarmProject:{
                pigfarmProjectDemandList:[]
              },
              designInfoVo:{
              }
            },
            //
            areaList:[],
          }
      },
      created(){
        this.init()
        // 查询详情
        if (this.$route.query.id){
          this.loading = true
          getBudgetingDetail(this.$route.query.id).then(res=>{
            if (res.code==0){
              this.form = res.data
            }
            this.loading = false
          }).catch(err=>{
            this.loading = false
          })
        }
      },
      methods:{
        updateBudgetingDetail,
        addBudgetingDetail,
        init(){
          this.form.createName = this.$store.state.user.name+this.$store.state.user.account
          this.form.createTime = this.$zbPlugins.timeFormat(new Date(),'yyyy-MM-dd hh:mm:ss')

          request({
            url: `/sys-dict/list?type=area`,
            method: 'post',
            data: {}
          }).then(res=>{
            this.areaList = res.data
          })
        },
        getBpm(row){
          newWindowBpm(row.instId,1)
        },
        // 上传成功
        uploadSuccess(model,file){
          if (model && model.length){
            model[model.length-1].createBy = this.$store.state.user.name+this.$store.state.user.account
            model[model.length-1].createTime = this.$zbPlugins.timeFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
          }
        },
        canEditAdd(){
          return this.$route.query.type=='edit' || this.$route.query.type=='add'
        },
        handleChange(val, key) {
        },
        showBpm(){
          this.showBpmDialog = true
          this.bpmUrl = getPortUrl(this.form.instId, Cookies.get("username"))
        },
        save(){
          this.form.status = ''
          this.loading = true
          if (this.form.id != undefined) {
            updateBudgetingDetail(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.loading = false;
            }).catch(()=>{this.loading = false});
          } else {
            addBudgetingDetail(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.loading = false;
            }).catch(()=>{this.loading = false});
          }
        },
        submit(){
          this.form.status = 'active'
          if (!this.form.technicalChangeFiles || (this.form.technicalChangeFiles && !this.form.technicalChangeFiles.length)){
            return this.$message.error('技改造价文件 不能为空')
          }
          if (!this.form.bpmInfos
            || (this.form.bpmInfos && !this.form.bpmInfos.length )
            || (this.form.bpmInfos && this.form.bpmInfos.length && !this.form.bpmInfos.filter(i=>i.flag==1).length)){
            return this.$message.error('关联图纸设计流程 不能为空')
          }
          this.$refs["form1"].validate(valid => {
            if (valid) {
              this.loading = true
              let a = this.dealSendData({
                createTime:'',
                createName:'',
              },this.form,true)
              if (a.technicalChangeFiles && a.technicalChangeFiles.length)
                for (let i = 0; i < a.technicalChangeFiles.length; i++) {
                  a.technicalChangeFiles[i] = this.dealSendData({
                    id:'',
                    fileName:'',
                    fileSize:'',
                    filePath:'',
                  },a.technicalChangeFiles[i])
                }
              if (this.form.id != undefined) {
                updateBudgetingDetail(a).then(response => {
                  this.msgSuccess("修改成功");
                  this.loading = false;
                  if (response.code==0){
                    newWindowBpm(response.data.instId,null,{path:`/budgetManager/budgeting`},true, Index)
                  }
                }).catch(()=>{this.loading = false});
              } else {
                addBudgetingDetail(a).then(response => {
                  this.msgSuccess("新增成功");
                  this.loading = false;
                  if (response.code==0){
                    // 刷新父级的页面路由
                    newWindowBpm(response.data.instId,null,{path:`/budgetManager/budgeting`},true, Index)
                  }
                }).catch(()=>{this.loading = false});
              }
            }
          });
        },
      },
    }
</script>
